<template>
    <transition
      name="custom-classer-transition"
      enter-active-class="animated fadeInDown"
      leave-active-class="animated fadeOutUp"
    >
      <div class="modal-ctrl-body" v-show="updateDepartmentModalObj.isShow"
      >
        <div class="modal-ctrl-main even-row-ctrl">
          <div class="modal-title">
            <p>修改部门信息</p>
          </div>
          <div class="modal-ctrl-content">
            <div class="even-row">
              <!-- 都可以修改部门名称 -->
              <!--<div class="modal-row" v-show="typeTag">-->
              <div class="modal-row">
                <div class="modal-form-key f-l indispensable">
                  部门名称：
                </div>
                <input type="text"
                       maxlength="30"
                       placeholder="最长输入30个字符"
                       v-model="ModalData.partName" class="modal-text f-l">
              </div>

              <!--<div class="modal-row" >-->
                <!--<div class="modal-form-key f-l ">-->
                  <!--细分部门地址：-->
                <!--</div>-->
                <!--<input type="text" v-model="ModalData.partAddress" class="modal-text f-l">-->
              <!--</div>-->

              <div class="modal-row" >
                <div class="modal-form-key f-l">
                  部门手台：
                </div>
                <input type="text"
                       maxlength="16"
                       placeholder="最长16位"
                       v-model="ModalData.partRadioId" class="modal-text f-l">
              </div>

              <div class="modal-row" >
                <div class="modal-form-key f-l">
                  部门电话：
                </div>
                <input type="number"
                       maxlength="11"
                       v-model="ModalData.partTel" class="modal-text f-l input-number"  >
              </div>

              <div class="modal-row" >
                <div class="modal-form-key f-l">
                  部门排序：
                </div>
                <input type="number"
                       maxlength="4"
                       placeholder="最长4位字符"
                       v-model="ModalData.sort" class="modal-text f-l input-number">
              </div>
              <!--<div class="modal-row" >-->
                <!--<div class="modal-form-key f-l">-->
                  <!--是否隐藏：-->
                <!--</div>-->
                <!--<input type="text" v-model="ModalData.isDisplay" class="modal-text f-l">-->
              <!--</div>-->
              <!--<div class="modal-row" >-->
                <!--<div class="modal-form-key f-l">-->
                  <!--备注：-->
                <!--</div>-->
                <!--<input type="text" v-model="ModalData.remark" class="modal-text f-l">-->
              <!--</div>-->
            </div>
          </div>
          <div class="btns text-r">
            <button type="button" class="btn btn-default"  @click="close">取消</button>
            <button type="button" class="btn btn-info" @click="subBtn">确定</button>
          </div>
        </div>
      </div>
    </transition>
</template>

<script>
  export default {
    name: "updateDepartmentModal",
    props:["updateDepartmentModalObj"],
    data(){
      return {
        ModalData: {
          id: this.updateDepartmentModalObj.id,             // id
          partName: this.updateDepartmentModalObj.partName,       // 细分部门名字 ,
          // partAddress: '',    // 细分部门地址 ,
          partParentId: this.updateDepartmentModalObj.partParentId,   // 细分部门父id ,
          partRadioId: this.updateDepartmentModalObj.partRadioId,    // 细分部门手台 ,
          partTel: this.updateDepartmentModalObj.partTel,        // 细分部门电话 ,
          sort: this.updateDepartmentModalObj.sort,            // 细分部门排序
          // partRemark: '',     // 细分部门备注 ,
          // isDisplay: 0,       // 是否隐藏0是展示，1是影藏 ,
        }
      }
    },
    computed:{
      typeTag(){
        return this.updateDepartmentModalObj.type === 0;
      }
  },
    methods: {
      //关闭弹窗
      close(){
        this.$emit("updateDepartmentClose");
        this.clearData(); //关闭弹窗清除数据
      },
      //提交
      subBtn(){
        this.ModalData.id = this.updateDepartmentModalObj.id;
        this.ModalData.partParentId = this.updateDepartmentModalObj.partParentId;
        //console.log(JSON.stringify(this.ModalData))
        // 如为虚拟部门，父节点id为点击部门的id
        if(this.updateDepartmentModalObj.type === 0 && this.verifyForm.isNull(this.ModalData.partName)){
          this.s_alert('请输入部门名称！');
          // alert('请输入部门名称！');
          return false;
        }
        // if(this.updateDepartmentModalObj.type === 0){  // 虚拟部门修改接口
          this.$axios({
            url: baseURL+'api/jp-HCZZ-AdminWeb-app-ms/addressbook/part/updateforpart',
            data: this.ModalData,
            method: 'put'
          })
          .then(res => {
            this.s_alert('修改成功');
            // alert('修改成功');
            this.clearData();
            this.close()
          })
            .catch( err => {
              this.s_alert("修改失败");
              // alert("修改失败");
            })
        // }
        /*else if(this.updateDepartmentModalObj.type === 1){ // 真实部门接口
          this.$axios.post( baseURL+'api/jp-HCZZ-AdminWeb-app-ms/addressbook/station/updateforstationinfo',this.ModalData)
            .then(res => {
              alert('修改成功');
              this.clearData();
              this.close()
            })
            .catch( err => {
              alert('修改失败')
            })
        }*/
      },
      clearData(){
        this.ModalData = {
          id: '',
          partName: '',       // 细分部门名字 ,
          // partAddress: '',    // 细分部门地址 ,
          partParentId: '',   // 细分部门父id ,
          partRadioId: '',    // 细分部门手台 ,
          partTel: '',        // 细分部门电话 ,
          sort: 0,            // 细分部门排序
          // partRemark: '',     // 细分部门备注 ,
          // isDisplay: 0       // 是否隐藏0是展示，1是影藏 ,
        }
      }
    },
    watch: {
      updateDepartmentModalObj: {
        handler(val){
          this.$axios.get(baseURL + "api/jp-HCZZ-AdminWeb-app-ms/addressbook/part/find?id="+val.id)
            .then(res => {
              let data = res.data
              this.ModalData = {
                id: data.id,             // id
                partName: data.partName,       // 细分部门名字 ,
                // partAddress: '',    // 细分部门地址 ,
                partParentId: data.partParentId,   // 细分部门父id ,
                partRadioId: data.partRadioId,    // 细分部门手台 ,
                partTel: data.partTel,        // 细分部门电话 ,
                sort: data.sort,            // 细分部门排序
                // partRemark: '',     // 细分部门备注 ,
                // isDisplay: 0       // 是否隐藏0是展示，1是影藏 ,
              }
            })

        },
        deep: true
      }
    },

  }
</script>

<style scoped>
  .input-number {
    width: 60%;
  }
</style>
